<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>控制页面</title>
		<style type="text/css">
			body{
				background-image: url(img/bg.jpg);
			}
			
			#title{
				color: #888888;
			}
			
			#alllLightBtn>img{
				margin: 0px 10px;
			}
		</style>
		<script src="jquery-3.5.1/jquery-3.5.1.min.js"></script>
	</head>
	<body>
		<div id="title"><h2>智能家居灯控系统</h2></div>
		<div align="center">
			<!--灯泡-->
			
			<img id="mainLight" src="img/l-close.png" />
		</div>
		<div align="center" style="margin-top: -88px;">
			<img src="img/light_btm_bg.png" />
		</div>
		<div align="center" style="margin-top: -190px;">
			<img id="switchBtn" src="img/switch-close.png" />
		</div>
		<div id="alllLightBtn" align="center" style="margin-top: 100px;">
			<img id="red-btn" src="img/off-red.png" />
			<img id="blue-btn" src="img/off-blue.png" />
			<img id="yellow-btn" src="img/off-yellow.png" />
			<img id="green-btn" src="img/off-green.png" />
			<img id="purple-btn" src="img/off-purple.png" />
		</div>
		<script type="text/javascript">
			var switchBtn = document.getElementById("switchBtn");
			//是否打开标志
			var isOpen =  false;

			function sendColor(color,url){
				$.ajax({
					type: "get",
					url: url,
					data: "color="+color,
					success: function(msg){
						//alert( "Data Saved: " + msg );
					}
				});
			}
			function openOrClose(switchFlag,url){
				//向后台发起请求
				if(switchFlag){
					$.ajax({
						type: "get",
						url: url,
						data: "switchFlag=1",
						success: function(msg){
							//alert( "Data Saved: " + msg );
						}
					});
				}else{
					$.ajax({
						type: "get",
						url: url,
						data: "switchFlag=0",
						success: function(msg){
							//alert( "Data Saved: " + msg );
						}
					});
				}

			}
			switchBtn.onclick = function(){
				//取反
				isOpen = !isOpen;
				openOrClose(isOpen,"openOrCloseServlet");
				if(isOpen){
					sendColor("red","ChangeLightServlet");
					//this是谁??? 
					this.src = "img/switch-red.png";
					document.getElementById("mainLight").src = "img/l-red.png";
					document.getElementById("red-btn").src="img/on-red.png";
				}else{
					this.src = "img/switch-close.png";
					document.getElementById("mainLight").src = "img/l-close.png";
					document.getElementById("red-btn").src="img/off-red.png";
				}
				
			}
			
			//点击红色按钮执行动作
			document.getElementById("red-btn").onclick = function(){
				if(!isOpen){
					alert("灯未打开，不能改变颜色!!!");
					return;
				}
				
				if(isOpen){
					sendColor("red","ChangeLightServlet");
					document.getElementById("mainLight").src = "img/l-red.png";
					document.getElementById("switchBtn").src = "img/switch-red.png";
					this.src = "img/on-red.png";
					document.getElementById("blue-btn").src = "img/off-blue.png";
					document.getElementById("yellow-btn").src = "img/off-yellow.png";
					document.getElementById("green-btn").src = "img/off-green.png";
					document.getElementById("purple-btn").src = "img/off-purple.png";
					
				}
			}
			
			//点击蓝色按钮执行动作
			document.getElementById("blue-btn").onclick = function(){
				if(!isOpen){
					alert("灯未打开，不能改变颜色!!!");
					return;
				}
				
				if(isOpen){
					sendColor("blue","ChangeLightServlet");
					document.getElementById("mainLight").src = "img/l-blue.png";
					document.getElementById("switchBtn").src = "img/switch-blue.png";
					this.src = "img/on-blue.png";
					document.getElementById("red-btn").src = "img/off-red.png";
					document.getElementById("yellow-btn").src = "img/off-yellow.png";
					document.getElementById("green-btn").src = "img/off-green.png";
					document.getElementById("purple-btn").src = "img/off-purple.png";
					
				}
			}
			
			
			//点击黄色按钮执行动作
			document.getElementById("yellow-btn").onclick = function(){
				if(!isOpen){
					alert("灯未打开，不能改变颜色!!!");
					return;
				}
				
				if(isOpen){
					sendColor("yellow","ChangeLightServlet");
					document.getElementById("mainLight").src = "img/l-yellow.png";
					document.getElementById("switchBtn").src = "img/switch-yellow.png";
					this.src = "img/on-yellow.png";
					document.getElementById("red-btn").src = "img/off-red.png";
					document.getElementById("blue-btn").src = "img/off-blue.png";
					document.getElementById("green-btn").src = "img/off-green.png";
					document.getElementById("purple-btn").src = "img/off-purple.png";
					
				}
			}
			
			//点击绿色按钮执行动作
			document.getElementById("green-btn").onclick = function(){
				if(!isOpen){
					alert("灯未打开，不能改变颜色!!!");
					return;
				}
				
				if(isOpen){
					sendColor("green","ChangeLightServlet");
					document.getElementById("mainLight").src = "img/l-green.png";
					document.getElementById("switchBtn").src = "img/switch-green.png";
					this.src = "img/on-green.png";
					document.getElementById("red-btn").src = "img/off-red.png";
					document.getElementById("blue-btn").src = "img/off-blue.png";
					document.getElementById("green-btn").src = "img/off-green.png";
					document.getElementById("purple-btn").src = "img/off-purple.png";
					
				}
			}
			
			//点击绿色按钮执行动作
			document.getElementById("purple-btn").onclick = function(){
				if(!isOpen){
					alert("灯未打开，不能改变颜色!!!");
					return;
				}
				
				if(isOpen){
					sendColor("purple","ChangeLightServlet");
					document.getElementById("mainLight").src = "img/l-purple.png";
					document.getElementById("switchBtn").src = "img/switch-purple.png";
					this.src = "img/on-purple.png";
					document.getElementById("red-btn").src = "img/off-red.png";
					document.getElementById("blue-btn").src = "img/off-blue.png";
					document.getElementById("green-btn").src = "img/off-green.png";
					document.getElementById("purple-btn").src = "img/off-purple.png";
					
				}
			}
		
		</script>
	</body>
</html>
